<template>
	<view class="page">
		<view class="my-top">
			<!-- head -->
			<!-- <view class="head" >
				<view class="portrait">
					<image v-show="scrollTop>20" src="//img11.360buyimg.com/jdphoto/s40x40_jfs/t1/25255/18/10701/1678/5c89f892E78c04688/684d63c0d68e39b1.png"></image>
				</view>
				<view class="title">
					<text v-show="scrollTop>20">我的</text>
				</view>
			</view> -->
			<!-- 用户信息 -->
			<view class="user-info" v-if="hasLogin">
				<view class="portrait">
					<image :src="userInfo.headimg || comm_img_url+'/head.png'"></image>
				</view>
				<view class="info"  @click="toWallet()">
					<view class="nickname">
						<text>{{userInfo.nickname}}</text> 
					
					</view>
					
					<view class="rank">
						<!-- <image src="/static/rank.png"></image> -->
						<text>tel:{{userInfo.tel}}</text>
					</view>
					<view class=" " >
						<view class="mlz flex-box">
							<image src="/static/mlz.png"></image>
							<text class="text-1" style="position:relative;top:-8rpx;">{{memberInfor.points}}</text>
						</view>
					</view>
				</view>
				<view>
					<view style="text-align: center;">
						<image style="width:60rpx;height:70rpx;" :src="comm_img_url+'/pro/vip'+(Number(memberInfor.sw_level)-1)+'.png'"></image>
						<view style="font-size:24rpx;color:#333;margin-top:10rpx;" v-if="memberInfor.sw_level-1>=0">{{memberInfor.sw_name}}</view>
					</view>
					
				</view>
			</view>
			  <view v-else class="user-info" @click="onUserInfo">
				<view class="portrait">
				  <image src="/static/img/member.png"></image>
				</view>
				<view class="info">
				  <view class="nickname">
					<text>登录/注册</text>
				  </view>
				</view>
				
			  </view>
			
			<!-- 会员 -->
			<view class="vip-info" @click="onMmeberVip">
				<view class="vip">
					<image src="/static/cx-4.png"></image>
					<!-- <text class="line"></text> -->
					<text>臻享礼遇</text>
				</view>
				<view class="vip-explain">
					<!-- <text>超级会员一年预计可省99元</text> -->
				</view>
				<view class="vip-btn">
					<text>查看丽人权益</text>
				</view>
			</view>
			<!-- banner -->
			<!-- <image class="v-banner" src="/static/img/g-banner.png"></image> -->
			<swiper class="swiper2" circular="true" :indicator-dots="false" :interval="8000" :autoplay="false">
				
				<swiper-item v-for="(item,index) in swiperList2"  @tap="jumpType(item,key1)" :key="index">
					<image  class="v-banner" :src="item.imgurl" ></image>
				</swiper-item>
			</swiper>
		</view>
		<!-- 可提现魅力值 累计收益 -->
		<view class="my-wallet" style="padding-bottom:30rpx;"  @tap="jumpType({link_type:3,link:'/pages/sub/wallet/wallet'})">
			<view class="wallet-name flex-box">
				<view class="box-1">我的魅力值</view>
				<view class="box-1 flex-box">
					<view class="box-1">
						累计收益
					</view>
					<u-icon name="arrow-right" color="#616161" size="16" :bold="true"></u-icon>
				</view>
			</view>

			<view class="flex-box income-box">
				<view class="income-item box-1 flex-box" >
					<image :src="newImgUrl+'/ico/user_charm.png'" class="icon-item"></image>
					<view class="box-1">
						¥ <text class="item-text">{{memberInfor.points | fixedNum}}</text>
					</view>
				</view>
				<view class="income-item box-1 flex-box" >
					<image :src="newImgUrl+'/ico/user_total.png'" class="icon-item"></image>
					<view class="box-1">
						¥ <text class="item-text">{{memberInfor.total_points | fixedNum}}</text>
					</view>
				</view>
			</view>
		</view>
		<!-- 我的服务 -->
		<view class="my-wallet" style="padding-bottom:30rpx;">
			<view class="wallet-name flex-box" @tap="toServices(0)">
				<view class="box-1">我的服务 </view>
				<u-icon name="arrow-right" color="#616161" size="16" :bold="true"></u-icon>
			</view>
			<view class="flex-box medal" style="justify-content: space-between;">
				<view class=" fw-li"  @tap="toServices(0)">
					<image src="/static/m-fw-1.png" class="fw-img"></image>
					<view class="fw-text">待使用 
							<text class="num1">{{memberInfor.coupon_num0}}</text>张
						</view>
				</view>
				<view class=" fw-li" @tap="toServices(1)" >
				  <image src="/static/m-fw-2.png" class="fw-img"></image>
					<view class="fw-text">已使用
							<text class="num2">{{memberInfor.coupon_num1}}</text>张
						 </view>
				</view>
			</view>
		</view>
		<!-- 订单信息 -->
		<view class="order-box">
			<view class="title flex-box" @click="onSkipOrder(-1)">
				<view class="box-1">
					我的订单 
				</view>
				<u-icon name="arrow-right" color="#616161" size="16" :bold="true"></u-icon>
			</view>
			<view class="order-info">
				<view class="list" @click="onSkipOrder(0)">
					<view class="icon">
						<image :src="comm_img_url+'/pro/g-nav1.png'" class="ico-g"></image>
						<!-- <text class="iconfont icon-daifukuan"></text>
						<text class="num">22</text> -->
					</view>
					<view class="title">
						<text>待付款</text>
					</view>
				</view>
				<view class="list" @click="onSkipOrder(1)">
					<view class="icon">
						<image :src="comm_img_url+'/pro/g-nav2.png'" class="ico-g"></image>
					</view>
					<view class="title">
						<text>待发货</text>
					</view>
				</view>
				<view class="list" @click="onSkipOrder(2)">
					<view class="icon">
						<image :src="comm_img_url+'/pro/g-nav3.png'" class="ico-g"></image>
					</view>
					<view class="title">
						<text>待收货</text>
					</view>
				</view>
				<view class="list" @click="onSkipOrder(3)">
					<view class="icon">
						<image :src="comm_img_url+'/pro/g-nav4.png'" class="ico-g"></image>
					</view>
					<view class="title">
						<text>已完成</text>
					</view>
				</view>
				
			</view>
		</view>
		
		<!-- 我的服务 -->
		<view class="my-service">
			<view class="title">
				<text>功能设置</text>
			</view>
			<view class="service-list">
				<view class="list" v-if="memberInfor.is_store==1" @click="onServer('business')">
					<view class="thumb">
						<image src="/static/nav/f-nav1.png"></image>
					</view>
					<view class="name">
						<text>我是商家</text>
					</view>
				</view>
<!--        v-if="memberInfor.is_store==1"-->

			<!-- 	<view class="list" @click="onServer('signin')">
					<view class="thumb">
						<image src="/static/nav/f-nav2.png"></image>
					</view>
					<view class="name">
						<text>我要打卡</text>
					</view>
				</view> -->
				<view class="list" @click="onServer('team')">
					<view class="thumb">
						<image src="/static/nav/f-nav2.png"></image>
					</view>
					<view class="name">
						<text>我的团队</text>
					</view>
				</view>
				<view class="list" @click="onServer('invite')">
					<view class="thumb">
						<image src="/static/nav/f-nav3.png"></image>
					</view>
					<view class="name">
						<text>邀请朋友</text>
					</view>
				</view>
				<view class="list" @click="onServer('setting')">
					<view class="thumb">
						<image src="/static/nav/f-nav4.png"></image>
					</view>
					<view class="name">
						<text>账号设置</text>
					</view>
				</view>
<!--				<view class="list" @click="onServer('declare_declare')">
					<view class="thumb">
						<image src="/static/nav/f-nav1.png"></image>
					</view>
					<view class="name">
						<text>报关身份</text>
					</view>
				</view>-->
        <view class="list"  @click="onServer('declare')">
          <view class="thumb">
            <image src="/static/nav/f-nav16.png"></image>
          </view>
          <view class="name">
            <text>报关人</text>
          </view>
        </view>
        <view class="list" @click="onServer('addressList')">
					<view class="thumb">
						<image src="/static/nav/f-nav5.png"></image>
					</view>
					<view class="name">
						<text>收货地址</text>
					</view>
				</view>
				<view class="list" @click="toService('service')" style="position:relative;">
					<view class="thumb">
						<image src="/static/nav/f-nav6.png"></image>
					</view>
					<view class="name">
						<text>客服中心</text>
					</view>
			<!-- 		<button class="contact" style="position:absolute;left:0;top:0;width:100%;height:100%;border:none;"
					:plain="true" 
					type="default" 
					open-type="contact"></button> -->
				</view>
				<view class="list" @click="onServer('about')">
					<view class="thumb">
						<image src="/static/nav/f-nav7.png"></image>
					</view>
					<view class="name">
						<text>关于我们</text>
					</view>
				</view>
				<view class="list" @click="onServer('problem')">
					<view class="thumb">
						<image src="/static/nav/f-nav8.png"></image>
					</view>
					<view class="name">
						<text>常见问题</text>
					</view>
				</view>
			</view>
		</view>
    
		<!-- 客服热线 -->
		<view class="serve-hotline" @click="isHotline = false">
			<view class="cu-modal bottom-modal" :class="{'show':isHotline}">
			  <view class="cu-dialog">
					<view class="contact-list">
						<view class="list">
							<text>呼叫客服</text>
						</view>
						<view class="list">
							<text style="color: #959595;">400-800-900</text>
						</view>
						<view class="list">
							<text>取消</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- tabbar -->
		<TabBar :tabBarShow="4"></TabBar>
	</view>
</template>

<script>
	import TabBar from '../../components/TabBar/TabBar.vue';
	import {
		mapState
	} from 'vuex'
	export default {
		components:{
			TabBar,
		},
		data() {
			return {
				comm_img_url:'',newImgUrl:'',//图片资源
				swiperList2:[],
				scrollTop: 0,
				isHotline: false,
				memberInfor:{
					total_points:0,
					points:0,
				},
				goodsList:[
				  {
					id: 1,
					name: 'BANDALY 2020夏季女装连衣裙韩版大码宽松显瘦套装裙子两件套 JX19301 上豆绿下米白 M ',
					price: '219.00',
					vip_price: '129.00',
					img: '/static/img/goods_thumb_01.png',
					is_goods: 0,
				  }
				],
			};
		},
		onReady() {
			uni.hideTabBar();
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		computed: {
			...mapState(['hasLogin','userInfo'])
		},
		onLoad() {
			this.comm_img_url = this.$c.appImg
			this.newImgUrl = this.$c.newImgUrl
			this.getHeng()

		},
		onShow() {
			console.log(this.hasLogin,this.userInfo,9999)
			if(this.hasLogin){
				this.getMemberIndex()
			}
		},
		methods:{
			toWallet(){
				uni.navigateTo({
					url: '/pages/sub/wallet/wallet'
				})
			},
			toService(){
				uni.navigateTo({
					url: '/pages/sub/service/service'
				})
			},
			jumpType(item,key) {
				console.log('swperClick')
				var path = item.link;
				if (item.link_type == 1) {
					uni.navigateTo({
						url: "/pages/web-view/web-view?url=" + JSON.stringify(path)
					})
				} else if (item.link_type == 2) {
					uni.switchTab({
						url: path
					})
				} else if (item.link_type == 3) {
					uni.navigateTo({
						url: path
					})
				}
			},
			// 个人中心横幅
			getHeng(){
				this.$u.api.souceAds({type:4}).then(res => {
						if (res.status) {
							this.swiperList2 = res.msg
						}
					})
					.catch(err => {
						console.log(err);
					})
			},
			getMemberIndex(){
				this.$u.api.memberIndex().then(res => {
					console.log(res,8888888)
						if (res.status) {
							this.memberInfor = res.msg
						}
					})
					.catch(err => {
						console.log(err);
					})
			},
			// 我的服务
			toServices(index){
				if (!this.hasLogin) {
					uni.navigateTo({
						url: '/pages/login/login'
					})
					return
				}
				uni.navigateTo({
					url: '/pages/sub/Services/Services?type='+index
				})
				return false
				
			},
			
			/**
			 * 关注跳转
			 */
			onCollect(type){
				switch (type){
					case 'goods':
						uni.navigateTo({
							url: '/pages/GoodsOn/GoodsOn'
						})
						break;
					case 'content':
						uni.navigateTo({
							url: '/pages/ContentCollection/ContentCollection'
						})
						break;
					case 'record':
						uni.navigateTo({
							url: '/pages/BrowsingHistory/BrowsingHistory'
						})
						break;
				}
			},
			/**
			 * 订单
			 */
			onSkipOrder(type){
				if (!this.hasLogin) {
					uni.navigateTo({
						url: '/pages/login/login'
					})
					return
				}
				uni.navigateTo({
					url: '/pages/MyOrderList/MyOrderList?type=' + type,
				})
			},
			/**
			 * 钱包跳转点击
			 */
			onWallet(type){
				switch (type){
					case 'integral':
						uni.navigateTo({
							url: '/pages/IntegralDetails/IntegralDetails',
						})
						break;
					case 'coupon':
						uni.navigateTo({
							url: '/pages/MyCoupon/MyCoupon',
						})
						break;
					case 'wallet':
						uni.navigateTo({
							url: '/pages/MyWallet/MyWallet',
						})
						break;
					case 'SignIn':
						uni.navigateTo({
							url: '/pages/SignIn/SignIn',
						})
						break;
					case 'payment':
						uni.navigateTo({
							url: '/pages/PaymentCode/PaymentCode',
						})
						break;
				}
			},
			/**
			 * 我的服务点击
			 */
			onServer(type){
				if (!this.hasLogin) {
					uni.navigateTo({
						url: '/pages/login/login'
					})
					return
				}
				switch (type){
					case 'declare':
						uni.navigateTo({
							url: '/pages/sub/declare/declare'
						})
						break;
					case 'signin':
						uni.navigateTo({
							url: '/pages/sub/SignIn/SignIn'
						})
						break;
					case 'team':
						uni.navigateTo({
							url: '/pages/sub/team/team'
						})
						break;
					case 'invite':
						uni.navigateTo({
							url: '/pages/sub/invite/invite'
						})
						break;
					case 'setting':
						uni.navigateTo({
							url: '/pages/sub/Setting/Setting'
						})
						break;
					case 'business':
						if(this.memberInfor.is_store==1){
						
							uni.navigateTo({
								url: '/pages/sub/Business/Business'
							})
						}else{
							uni.showToast({
								icon: 'none',
								title: '您还不是商家'
							})
							return false
						}
						break;
					case 'problem':
						uni.navigateTo({
							url: '/pages/sub/Problem/Problem'
						})
						break;
          case 'declare_declare':
						uni.navigateTo({
							url: '/pages/sub/declare/declare'
						})
						break;
					case 'about':
						uni.navigateTo({
							url: '/pages/sub/AboutUs/AboutUs'
						})
						break;
					case 'addressList':
						uni.navigateTo({
							url: '/pages/sub/AddressList/AddressList'
						})
						break;
						
					case 'serve':
						this.isHotline = true;
						break;
				}
			},
			/**
			 * 设置点击
			 */
			onSetting(){
				uni.navigateTo({
					url: '/pages/Setting/Setting'
				})
			},
			/**
			 * 消息点击
			 */
			onMessage(){
				uni.navigateTo({
					url: '/pages/Message/Message'
				})
			},
			/**
			 * 会员点击
			 */
			onMmeberVip(){
				uni.navigateTo({
					url: '/pages/joinUs/index?classTab=2'
				})
				// uni.navigateTo({
				// 	url: '/pages/MembersOpened/MembersOpened',
				// })
			},
      /**
       * 跳转点击
       * @param {String} type 跳转类型
       */
      onSkip(type){
        switch (type){
          case 'goods':
            uni.navigateTo({
              url: '/pages/GoodsDetails/GoodsDetails',
              animationType: 'zoom-fade-out',
              animationDuration: 200
            })
            break;
        }
      },
      /**
       * 用户信息点击
       * @param {Number} type
       */
      onUserInfo(){
        uni.navigateTo({
          url: '/pages/login/login'
        })
      }
		},
		filters:{
			fixedNum(val){
				return parseFloat(val).toFixed(2)?? 0.00
			}
		}
	}
</script>

<style scoped lang="scss">
	@import 'my.scss';
</style>
